﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeFile="ClientApiSample.aspx.cs" Inherits="ClientApiSample" %>
<%@ Register assembly="SCS.Toolbar" namespace="SCS.Web.UI.WebControls" tagprefix="SCS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="Toolbar.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* used to demonstrate class swapping with client API */
    .toolbar .button_enabled2 a:hover
    {
        background-color: #EFF2F8;
        border: 1px solid #009933;
    }
    .toolbar .button_enabled2 a
    {
	    color: #1B3A7A;
    }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH1" Runat="Server">
    
    <div>
        
        <SCS:Toolbar ID="Toolbar1" runat="server" EnableClientApi="True" 
            CssClass="toolbar" 
            OnButtonClicked="Toolbar1_ButtonClicked"  
            Width="100%" 
            SelectionMode="Single" 
            OnClientButtonClick="toolbar_buttonClicked" >             
            
            <ButtonCssClasses 
                CssClass="button" 
                CssClassEnabled="button_enabled" 
                CssClassDisabled="button_disabled" 
                CssClassSelected="button_selected"/> 
                
            <Items>
                <SCS:ToolbarButton ImageUrl="~/Images/ctxwiz_cls.gif" Text="New" 
                    ToolTip="Create a new record" 
                    CommandName="CreateNew" 
                    CommandArgument="55" />   
                <SCS:ToolbarButton ImageUrl="~/Images/Delete.gif" Text="Delete" Enabled="false"
                    ConfirmationMessage="Are you sure you want to delete?" 
                    ToolTip="Delete the record" 
                    CommandName="Delete" 
                    CommandArgument="99"/>
                <SCS:ToolbarButton ImageUrl="~/Images/Save.gif" Text="Save"
                    ToolTip="Save the record" 
                    CommandName="Save" 
                    CommandArgument="88"/>
                <SCS:ToolbarButton ImageUrl="~/Images/ctxhelp_hide.gif" Text="Help"
                    ToolTip="Help for this form" 
                    CommandName="GotoHelp" 
                    CommandArgument="77" />                      
            </Items>    
        </SCS:Toolbar>
        <br />
    
        <asp:Literal ID="ButtonClickedText" runat="server" EnableViewState="false"></asp:Literal><br />
    
    <br />
    For Button: 
    <select id="buttonIndex">
        <option value="0"># 1</option>
        <option value="1"># 2</option>
        <option value="2"># 3</option>
        <option value="3"># 4</option>
    </select><br />
    
    <p>
        <input type="button" value="Hide" onclick="showButton(false);" />
        <input type="button" value="Show" onclick="showButton(true);" />
        <input type="button" value="Disable" onclick="enableButton(false);" />
        <input type="button" value="Enable" onclick="enableButton(true);" />
        <input type="button" value="Unselect" onclick="selectButton(false);" />
        <input type="button" value="Select" onclick="selectButton(true);" />
        <input type="button" value="Change Hover Color" onclick="toggleCssClass();" />
        <input type="button" value="Change text to:" onclick="changeText();" />
        <input type="text" value="" id="newText" />
    </p>
   
    <p>
        All client-side changes will be persisted on the server side.<br />
        <asp:Button Text="Test Post-Back" ID="PostCommand" runat="server" />
    </p>
    
    <script type="text/javascript">
        function pageLoad() {
            //var toolbar = $find("ToolbarClient");
            //toolbar.add_buttonClicked(toolbar_buttonClicked);
        }
        function showButton(visible) {
            var toolbar = $find("ToolbarClient");
            var button = toolbar.get_items()[parseInt($get("buttonIndex").value)];

            if (button != null) {
                button.set_visible(visible);
            }
        }
        function enableButton(enabled) {
            var toolbar = $find("ToolbarClient");
            var button = toolbar.getButtonById("ctl00_CPH1_Toolbar1_item_" + $get("buttonIndex").value);

            if (button != null) {
                button.set_enabled(enabled);
            }
        }
        function selectButton(selected) {
            var toolbar = $find("ToolbarClient");
            var buttonIndex = parseInt($get("buttonIndex").value);
            
            var button = toolbar.getButtonByIndex(buttonIndex);

            if (button != null) {
                button.set_selected(selected);
            }

            // 2nd way
            //toolbar.setItemSelected(buttonIndex, selected);
        }
        function changeText() {
            var toolbar = $find("ToolbarClient");
            var button = toolbar.getButtonById("ctl00_CPH1_Toolbar1_item_" + $get("buttonIndex").value);

            if (button != null) {
                button.set_text($get("newText").value);
            }
        }
        function toggleCssClass() {

            var toolbar = $find("ToolbarClient");
            var button = toolbar.getButtonById("ctl00_CPH1_Toolbar1_item_" + $get("buttonIndex").value);

            if (button != null) {
                
                if (button.get_cssClassEnabled() == "button_enabled")
                    button.set_cssClassEnabled("button_enabled2");
                else
                   button.set_cssClassEnabled("button_enabled");
            }
        }
        function toolbar_buttonClicked(sender, eventArgs) {
        
            if (eventArgs.get_selectedIndex() == 2) {

                var flag = confirm("Do you want to proceed?");
                eventArgs.set_cancel(!flag);
            }
        }    
    </script>

    </div>
</asp:Content>
